<template>
    <el-card style="margin-top: 15px" v-loading="loading">
        <div class="center-nav" ref="centerNavRef" style="position: relative;height: 200px">
            <div class="center-nav-item" v-for="arr in array" :key="arr.label" >
                <span style="width: 8.33%;height: 80px;">{{arr.label}}</span>
                <div style="width: 1100px;">
                    <el-button v-for="btn in arr.choises" :key="btn.id">{{btn.name}}</el-button>
                </div>
            </div>
            <div @click="toBig" ref="toBigButtonRef" style=" margin:0 auto;position: absolute;bottom: 10px;left: 50%;color: #FA3684;cursor: pointer">展开全部</div>
        </div>
    </el-card>
</template>
<script lang="ts">
export default {
    name: "TopNav"
}
</script>
<script setup lang="ts">
import {ref} from "vue";
import {defineProps, onMounted} from "vue";
import {useCourseStore} from "@/store/course";

const props=defineProps({
    array:{}
})

const centerNavRef = ref()
const toBigButtonRef = ref()
const isShow = ref(false)
const courseStore=useCourseStore()

let loading=ref(false)
const toBig = async() => {
    if (toBigButtonRef.value.innerHTML === '展开全部') {
        loading.value=true
        await courseStore.getNavList2()
        isShow.value = true
        toBigButtonRef.value.innerHTML = '收起'
        centerNavRef.value.style.height = 500 + 'px'
        setTimeout(()=>{
            loading.value=false
        },300)
        // console.log(1)/
    } else if(toBigButtonRef.value.innerHTML ==='收起'){
        loading.value=true
        await courseStore.getNavList1()
        isShow.value = false
        toBigButtonRef.value.innerHTML = '展开全部'
        centerNavRef.value.style.height = 200 + 'px'
        setTimeout(()=>{
            loading.value=false
        },300)
    }
    console.log(2)
}
onMounted(()=>{
    courseStore.getNavList1()
})
</script>

<style scoped>

</style>
